<template>
  <div class="payment">
    <div v-show="showFlag">
      <div class="title">用户支付详情页</div>
      <div class="cont">
        违法人: <span v-html="result.party"></span>
      </div>
      <div class="cont">
        车牌号: <span v-html="result.carnumber"></span>
      </div>
      <div class="cont">
        罚款金额: <span>{{ticket}}</span>
      </div>
      <div class="cont">
        案件编号: <span v-html="result.code"></span>
      </div>
      <div class="cont">
        违章原因: <span v-html="result.briefofcase"></span>
      </div>
      <div class="btncont">
        <button type="button" class="btn"  @click="next">在线缴款</button>
          <!--<a-->
            <!--href=`http://ceshi.nontax.cn:6769/NonTaxPayMents/thirdtest/payfine.do?token=${params.tokenText}&ddbh=${params.ddbh}&sign=${params.signText}`>-->
          <!--</a>-->
      </div>
    </div>
    <div class="noresult" v-show="!showFlag">
      <!--系统信息错误哦！-->
    </div>
  </div>

</template>
<script type="text/ecmascript-6">
  import http from '../util/https'
  import {baseurl} from '../base/config'
  import {mapGetters} from "vuex"

  export default {
    name: "payment",
    data() {
      return {
        result: "",
        showFlag: false,
        ticket: "",
        params: {}
      }
    },
    created() {
      document.title = '用户支付页面';
      this.getData();
      this.paymoeny()
    },
    computed: {
      ...mapGetters([
        'setuser'
      ]),
    },
    methods: {
      next(){
        window.location.href = `http://ceshi.nontax.cn:6769/NonTaxPayMents/thirdtest/payfine.do?token=${this.params.tokenText}&ddbh=${this.params.ddbh}&sign=${this.params.signText}`
      },
      //获取数据
      getData: async function () {
        const url = baseurl + "/caseQuery/getIllegalCase.json";
        let params = {
          illegalCaseId: this.setuser.illegalCase.id
        };
        // console.log(params);
        const res = await http.get(url, params);
        if (res.data.code === 0) {
          this.showFlag = true;
          this.ticket = res.data.data.ticket;
          setTimeout(() => {
            this.result = res.data.data.illegalCase
          }, 30);
        }
      },
      paymoeny() {
        this.pay()
      },
      pay: async function () {
        const url = baseurl + "/pay.json ";
        console.log(url);
        let params = {};
        const res = await http.post(url, params);
        if (res.data.code === 0) {
          this.params = res.data.data;
          setTimeout(() => {
            //支付接口
            this.payall()
          }, 100)
        }

      },
      payall: async function () {
        const url = "http://ceshi.nontax.cn:6769/NonTaxPayMents/thirdtest/payfine.do";
        console.log(url);
        let params = {
          token: this.params.tokenText,
          ddbh: this.params.ddbh,
          sign: this.params.signText
        };
       // console.log(params);
        const res = await http.get(url, params);
       // console.log(res)

      }
    }
  }
</script>
<style scoped type="text/less" lang="less">
  .payment {
    .noresult {
      text-align: center;
      font-size: .3rem;
      height: 10rem;
      line-height: 10rem;
    }

    .title {
      text-align: center;
      font-size: .3rem;
      color: #449d44;
      margin: 1rem auto;
    }
    .cont {
      font-size: .3rem;
      padding: 0 .5rem;
      line-height: .8rem;
    }
    .btncont {
      text-align: center;
      a {
        background: #449d44;
        text-decoration: none;
        color: #fff;
      }
      .btn {
        margin-top: .5rem;
        width: 4rem;
        height: .8rem;
        color: #fff;
        line-height: .8rem;
        background: #449d44;
        outline: none;
        border: none;
        border-radius: .2rem;
        font-size: .3rem;

      }
    }

  }

</style>
